<template>
  <div>
    <el-container>
      <el-header style="background-color: white; width: 100%;position: fixed;z-index: 99 ;border-bottom: rgba(99,99,99,0.2) 1px solid">
        <div style="margin: 0 auto;width: 1200px;background-color: white;height: 59px;border-bottom: rgba(99,99,99,0.2) 1px solid">
          <!--            头部的部分-->

          <div style="float: left;display: inline-block">
            <a  href="/index">
              <img  style="height: 30px;margin-top: 13px;" src="http://www.autotianjin.com.cn/i/web/images/logo.png">
            </a>
          </div>
          <div style="margin: 0 auto;display: inline-block;">
            <el-menu
                router
                :default-active="activeIndex"
                     class="el-menu-demo"
                     mode="horizontal">
              <el-menu-item index="/index">首页</el-menu-item>

              <el-menu-item index="/showList">车展购票</el-menu-item>

              <!--submenu子菜单-->
              <!--
                            <el-menu-item index="2"><a  @click="$router.push('/index')" style="margin: 0 20px">2好</a></el-menu-item>

                            &lt;!&ndash; todo 跳转到笔记&ndash;&gt;
                            <el-menu-item index="3" style="margin: 0 20px"><a @click="$router.push('/homepage')" style="text-decoration: none">笔记</a></el-menu-item>
              -->

              <div style="float: right;position: relative;top: 10px;left: 450px">
                <el-input type="text" placeholder="搜索关键字" v-model="search">
                  <!--                  todo 搜索后  根据关键词展示稿件  -->
                  <el-button slot="append" icon="el-icon-search" @click="searchRecipe()"></el-button>
                  <span><a href="javascript:void(0);"></a></span>
                </el-input>
              </div>
            </el-menu>
          </div>

          <!-- 显示当前登录的用户信息 -->
          <div class="login-user" style="float: right;display: inline-block;margin-top:10px;margin-right: 135px">
            <el-dropdown>
              <el-avatar size="medium" :src="admin.avatar" style="display: block;vertical-align: middle"></el-avatar>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item icon="el-icon-s-custom" @click.native="openManagement()">用户中心</el-dropdown-item>
                <el-dropdown-item icon="el-icon-remove" divided @click.native="logout()">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>

          <!--          <div style="float: right;display: inline-block;padding-top:20px;padding-right:5px;margin-left: 0px;"><a href="" style="display: inline-block;
                width: 60px;
                height: 25px;
                text-align: center;
                line-height: 23px;
                background: #FFB31A;
                color: #fff;
                font-size: 14px;
                border-radius: 4px;
                text-decoration: none;">发布</a></div>-->


        </div>
      </el-header>
      <el-main>
        <div style="width: 1200px;margin: 0 auto">

        <!--    车展票的详情页面-->
          <div style="border: #ccc 1px solid;width: 1000px;height:11000px;position: relative;overflow-y: hidden">
            <!--      车展购票表单-->
            <el-header>
              <div style="margin-top: 100px">
                <el-container>
                  <el-aside width="340px" style="margin-right: 30px"><img
                      src="https://img.alicdn.com/bao/uploaded/i3/2251059038/O1CN01ECHZCn2GdSUexvB1d_!!0-item_pic.jpg_q60.jpg_.webp"
                      alt="" style="margin: 0">
                  </el-aside>
                  <!--       购票表单-->
                  <el-main width="500px">
                    <div class="buyForm">
                      <div style="margin: 10px 0">
                        <span style="font-size: 22px;margin-bottom: 20px;display: inline-block ">{{show.title}}</span><br>
                        <p>时间：{{show.startTime}}——{{show.endTime}}</p>
                        <p>场馆：天津市 | 梅江会展中心二期 </p>
                      </div>
                      <!--开始选择-->
                      <div>
                        <div class="sele">
                          <span>场次</span>
                          <el-radio v-model="radio1" label="1" border style="margin-left:10px">
                            {{show.startTime}}——{{show.endTime}}
                          </el-radio>
                          <br>
                          <div style="margin: 10px 0">
                            <span>票档</span>
                            <el-radio v-model="show.price" :label="show.price" border style="margin-left:10px">
                              单人票{{show.price}}元
                            </el-radio>
                          </div>
                        </div>
                        <div style="font-size: 16px">
                          <div style="margin: 10px 0;color: #4a4a4a;">
                            <span style="margin-right: 10px">数量</span>
                            <span>
                              <el-input-number v-model="order.totalNum" :min="1"></el-input-number>
                            </span>
                          </div>
                          <div style="margin: 20px 0">
                            <span>合计</span>
                            <span style="margin: 0 10px;">￥ {{ this.price }}</span>
                          </div>
                        </div>
                        <div>
                          <div style="margin: 20px 0;color: #fff">
                            <el-button type="primary" round @click="buy">购买</el-button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </el-main>
                </el-container>
              </div>
            </el-header>
            <!--      车展的详细介绍信息-->
            <div style="position: absolute;margin-top: 420px ; margin-left: 50px;margin-right: 50px " class="details">
              <el-main style="overflow: hidden">
                <h3>项目详情</h3>
                <el-divider></el-divider>
                <p>2023天津夏季梅江车展</p>
                <img
                    src="https://img.alicdn.com/imgextra/i3/2251059038/O1CN01WBKcnG2GdSUb0Gmne_!!2251059038.png_q60.jpg_.webp"
                    alt="" >
                <p>日期：2023年7月7日-10日</p>
                <p>时间：9:00-17:00</p>
                <p>最晚入场时间：16:30</p>
                <p>地点：天津梅江会展中心二期S馆</p>
                <p>入场方式：大麦电子票核销后，换取场馆纸质票入场</p>
                <img src="https://img.alicdn.com/imgextra/i3/2251059038/O1CN01h5j0V32GdSUmBYQs3_!!2251059038.png_q60.jpg_.webp" alt="">
                <img src="https://img.alicdn.com/imgextra/i2/2251059038/O1CN01wKOTKW2GdSUfCWcfP_!!2251059038.png_q60.jpg_.webp" alt="">
                <img src="https://img.alicdn.com/imgextra/i3/2251059038/O1CN01jbpmfA2GdSUjrTS4e_!!2251059038.png_q60.jpg_.webp" alt="">
                <p><b>参展品牌：</b>奔驰、宝马、奥迪、一汽-大众、上汽大众、捷达、凯迪拉克、别克、玛莎拉蒂、沃尔沃、捷豹路虎、Jeep、林肯、长安福特、江铃福特、东风标致、东风雪铁龙、一汽丰田、广汽丰田、东风本田、广汽本田、东风日产、东风启辰、斯巴鲁、马自达、一汽红旗、吉利、领克、哈弗、WEY、坦克、奇瑞、星途、捷途、长安汽车、北京汽车、五菱宝骏、广汽传祺、上汽大通、江西五十铃、东风风行、东风风神、荣威、名爵、一汽奔腾、长安欧尚、比亚迪、AITO、飞凡汽车、几何、极氪、极狐、蔚来、小鹏汽车、零跑、岚图、福特电马、哪吒、欧拉、奇瑞新能源、smart、江淮思皓、腾势、长安深蓝、睿蓝汽车、智已、电动屋等60余个汽车品牌，具体参展品牌以现场实际为准。
                </p>
                <img src="https://img.alicdn.com/imgextra/i1/2251059038/O1CN01Zdl59A2GdSUgE5gGj_!!2251059038.png_q60.jpg_.webp" alt="">
                <img src="https://img.alicdn.com/imgextra/i1/2251059038/O1CN01DfjU1s2GdSUioET11_!!2251059038.png_q60.jpg_.webp" alt="">
                <p><b>展会规模：</b>展览面积4万平米，参展品牌60余个，参展车型500余辆，厂家直接参展，大型品牌巡展展具、厂家巡展模特及演员全程参与，车展专属特惠底价一步到位</p>
                <p><br><br></p>
                <p>交通指南：
                  ① 展会地址：西青区汇川路221号（山姆会员超市旁）<br>
                  ② 自驾：导航“梅江会展中心二期”，停车10元/次不限时，停车位充裕<br>
                  ③ 地铁：地铁6号线，梅江会展中心A口下车，南行900米<br>
                  ④ 公交：96路、227路、612路、636路，汐岸国际下车<br></p>
                <img src="https://img.alicdn.com/imgextra/i1/2251059038/O1CN01VM4p0U2GdSUfCamdp_!!2251059038.png_q60.jpg_.webp" alt="">
                <img src="https://img.alicdn.com/imgextra/i2/2251059038/O1CN01sGACus2GdSUcES1vL_!!2251059038.png_q60.jpg_.webp" alt="">
                <img src="https://img.alicdn.com/imgextra/i3/2251059038/O1CN01KASMRu2GdSUioDvqu_!!2251059038.png_q60.jpg_.webp" alt="">
                <p><b>展会订车优惠：</b>①现场订车即送价值3888元新车装具礼包②现场订车即可参与抽奖，家用电器、汽车用品等③现场购车可享消费券真实补贴，至高4000元 <br>

                  2023年西青区汽车促消费活动专项补贴资金1000万元：<br>

                  本活动适用以个人名义在活动合作企业购置新车的个人消费者。凡在西青区活动合作汽车销售企业购买“国六”标准燃油车或新能源汽车且为7座以下(含7座)家用新车的消费者可享受如下政府补贴政策：

                  <br>（一）针对购买家用新车的个人消费者（燃油车或新能源汽车），政府提供补贴政策。

                  <br>购车金额指使用政府消费券补贴前《机动车销售统一发票》中“价税合计”金额，“新能源汽车”需符合国家相关认定标准。

                  <br>购车金额5万元（含）—15万元（不含）的补贴1000元/辆；

                  <br>购车金额15万元（含）—25万元（不含）的补贴2000元/辆；

                  <br>购车金额25万元（含）—35万元（不含）的补贴3000元/辆；

                  <br>购车金额35万元（含）以上的补贴4000元/辆。

                  <br>（二）针对购买新能源汽车（纯电）的个人消费者，政府额外提供专项补贴政策。

                  <br>为鼓励新能源汽车发展，购买新能源汽车（纯电）的个人消费者，在享受以上补贴的基础上，额外提供专项补贴。

                  <br>购车金额5—10万元（不含）的补贴200元/辆；

                  <br>购车金额10万元（含）—20万元（不含）的补贴400元/辆；

                  <br>购车金额20万元（含）以上的补贴600元/辆。

                  <br>（三）针对购买燃油车（包含普通混合动力汽车、插电式混合动力汽车）的个人消费者，天津银联提供一定加油补贴。

                  <br>天津银联将联合中石化计划投入50万元的优惠补贴资金用于新购燃油车加油补贴，补贴标准为每辆新购燃油车给予100元加油补贴，使用规则以官方宣传为准。
                  <br>（四）针对分期购车的个人消费者，相关银行提供一定补贴。
                  <br>建设银行西青支行，向参加活动并使用建行分期购车的消费者发放一定金额汽车周边产品消费券，满额可用；
                  <br>工商银行西青支行，向参加活动并使用工行分期购车的消费者给予一定分期费率优惠，并赠送精美礼品；
                  <br>农业银行西青支行，向参加活动并使用农行分期购车的消费者给予一定费用补贴，并赠送精美礼品。</p>

                <img src="https://img.alicdn.com/imgextra/i2/2251059038/O1CN010Yhwkc2GdSUb0L1Db_!!2251059038.png_q60.jpg_.webp" alt="">
                <img src="https://img.alicdn.com/imgextra/i2/2251059038/O1CN01WiJ0ya2GdSUmBdwEU_!!2251059038.png_q60.jpg_.webp" alt="">

                <!--            购票须知-->
                <div class="known">
                  <h3>购票须知</h3>
                  <el-divider></el-divider>

                  <div>
                    <p>限购规则</p>
                    <span>每笔订单最多购买6张</span>
                  </div>
                  <div>
                    <p>退票/换票规则</p>
                    <span>票品为有价票券，非普通商品，其背后承载的文化服务具有时效性，稀缺性等特征，不支持退换。</span>
                  </div>
                  <div>
                    <p>入场规则</p>
                    <span>需兑换成纸质票验票入场，须打开【票夹】的二维码前往取票点换取，截图无效。</span>
                  </div>
                  <div>
                    <p>儿童购票</p>
                    <span>儿童免票，需家长陪同</span>
                  </div>
                  <div>
                    <p>发票说明</p>
                    <span>演出开始前，去【订单详情页】提交发票申请。演出结束后1个月左右邮寄给你，需自付邮费.</span>
                  </div>
                  <div>
                    <p>异常排单说明</p>
                    <span>对于异常订购行为，大麦网有权在订单成立或者生效之后取消相应订单。异常订购行为包括但不限于以下情形： （1）通过同一ID订购超出限购张数的订单。 （2）经合理判断认为非真实消费者的下单行为，包括但不限于通过批量相同或虚构的支付账号、收货地址（包括下单时填写及最终实际收货地址）、收件人、电话号码订购超出限购张数的订单。</span>
                  </div>
                  <div>
                    <p>温馨提示</p>
                    <span>1.购买前请您提前规划好行程，做好相应准备，以免影响您的正常观演，感谢您的理解和配合。2.若演出受不可抗力影响延期或取消，大麦将对演出票订单按照项目官方通知方案进行处理，其他因观演发生的费用需由您自行承担。</span>
                  </div>
                </div>
                <div>
                  <br>
                  <br>
                  <br>
                </div>
                <!--           活动须知-->
                <div class="known">
                  <h3>活动须知</h3>
                  <el-divider></el-divider>
                  <div>
                    <p>活动时长</p>
                    <span>以现场实际时长为准</span>
                  </div>
                  <div>
                    <p>入场时间</p>
                    <span>请于演出前约30分钟入场</span>
                  </div>
                  <div>
                    <p>禁止携带物品</p>
                    <span>由于安保和版权的原因，大多数演出、展览及比赛场所禁止携带食品、饮料、专业摄录设备、打火机等物品，请您注意现场工作人员和广播的提示，予以配合</span>
                  </div>
                  <div>
                    <p>寄存说明</p>
                    <span>无寄存处,请自行保管携带物品，谨防贵重物品丢失。</span>
                  </div>
                  <div>
                    <p>转送说明</p>
                    <span>本项目支持电子票转送，转送功能将在演出前24小时关闭。（注：当前仅支持大麦下单用户，暂不支持淘宝／天猫，支付宝本地生活下单用户发起转送，仅支持大麦APP发起和接收转送票品）</span>
                  </div>

                </div>


              </el-main>
            </div>
          </div>
      </div>
      </el-main>
      <el-footer height="200px">
        <el-row style="width: 1200px !important;margin: 0px auto;color:#fff;">
          <el-col :span="13" style="margin-top: 20px">
            <el-row>
              <el-col :span="10">
                <p class="title">主办单位
                  <el-divider></el-divider>
                </p>
                <p>中国汽车流通协会</p>
                <p>百瑞国际会展集团有限公司</p>
                <p>中国国际贸易促进委员会天津市分会</p>
              </el-col>
              <el-col :span="7">
                <p class="title">承办单位<el-divider></el-divider></p>
                <p>天津国际展览有限公司</p>
                <p>北京杜米文化传播有限公司</p>
              </el-col>
              <el-col :span="7">
                <p class="title" style="width: 100px">特别支持单位<el-divider></el-divider></p>
                <p>天津汽车流通协会</p>
              </el-col>
            </el-row>
            <el-row style="font-size: 14px;margin-top: 6px">
              Copyright © 2023 天津浩特瑞展览有限公司津ICP备16007344号-2技术支持：沣泽霖（北京）信息科技有限公司
            </el-row>
          </el-col>
          <el-col :span="4" style="text-align: center;margin-top: 20px">
            <img width="90" src="http://www.autotianjin.com.cn/i/web/images/images_tianjin_20230428/code_weixin.jpg" alt="">
            <p>扫一扫关注公众号</p>
          </el-col>
          <el-col :span="5" style="text-align: center;margin-top: 20px">
            <img src="http://www.autotianjin.com.cn/i/web/images/footer_logo.png" width="100%" alt="">
            <p style="font-size: 16px;margin-top: 10px">服务热线</p>
            <p style="font-size: 22px;margin-top: 15px">400-8099-016</p>
          </el-col>
        </el-row>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import global from '../../Global'
let preAdminUrl = global.preAdmins ;
let preShowUrl = global.preShows ;
let preTicketOrderUrl = global.preTicketOrders ;
export default {
  data() {
    return {
      search:"",
      activeIndex: '/showList',
      admin:{},
      // price: 1,
      num:  1,
      radio1: '1',
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      show:{},
      order:{totalNum:1}
    }
  },
  methods: {
    searchRecipe(){
    },
    buy(){
      let url = preTicketOrderUrl + "/add-new";
      this.order.showId = this.show.id;
      this.order.price = this.show.price;
      console.log(this.order);
      let formData = this.qs.stringify(this.order);

      let localJwt = localStorage.getItem('localJwt');
      this.axios.create({'headers': {'Authorization': localJwt}})
          .post(url, formData).then((response) => {
        let jsonResult = response.data;
        if(jsonResult.state == 20000){
          this.$alert('购买成功', '成功', {
            confirmButtonText: '确定',
            callback: action => {
              this.$router.push("/showList");
            }
          });
        }else {
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      });
    },
    onSubmit() {
      console.log('submit!');
    },
    count(){
      this.order.totalPrice=(this.order.totalNum*this.show.price).toFixed(2);
    },
    //登出
    logout(){
      let url = preAdminUrl + "/logout";
      let localJwt = localStorage.getItem('localJwt');
      this.axios.create({'headers': {'Authorization': localJwt}})
          .post(url).then((response) => {
        let jsonResult = response.data;
        if(jsonResult.state == 20000){
          this.$alert("退出成功", '成功', {
            confirmButtonText: '确定',
            callback: action => {
              localStorage.removeItem("localJwt");
              this.$router.push("/webLogin");
            }
          });
        }else{
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      });
    },
    openManagement(){
      this.$router.push("/userManagement");
    },
    //获取当事人信息
    loadLoginPrincipal(){
      let url = preAdminUrl + "/index";

      let localJwt = localStorage.getItem('localJwt');
      this.axios.create({'headers': {'Authorization': localJwt}})
          .get(url).then((response) => {
        let jsonResult = response.data;
        if(jsonResult.state == 20000){
          this.admin = jsonResult.data;
        }
      });
    },
    loadShowItem() {
      let showId = this.$router.currentRoute.query.showId;
      let url = preShowUrl + "/" + showId;

      let localJwt = localStorage.getItem('localJwt');
      this.axios.create({'headers': {'Authorization': localJwt}})
          .get(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.show = jsonResult.data;
        } else {
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
              this.$router.go(-1);
            }
          });
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  },
  computed: {
    price() {
      this.order.totalPrice = this.order.totalNum * this.show.price;
      return this.order.totalPrice;
    }
  },
  mounted() {
    this.loadLoginPrincipal();
    this.loadShowItem();
  }
}

</script>

<style>

body {
  background: #fff;
  font: 12px Noto Sans,"思源黑体";
  /*padding-top: 60px;*/
}


.buyForm p,span{
  color: #4a4a4a;
}
.sele{
  font-size: 16px;
}

.el-footer{
  margin: 0;
  padding: 0;
  background-color: #242424;
  overflow: hidden;
  text-align: left;
  position: relative;
  bottom: -55px;
}
.el-footer .title{
  width: 80px;
}
.el-footer .title .el-divider{
  background-color: #ffd04b;
  height: 2px;
  margin: 8px 0;
}
.el-footer p{
  margin-top: 6px;
}
</style>


